<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>轮播图</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .banner {
      width: 1200px;
      height: 500px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }
    .banner > div {
      position: relative;
      height: 100%;
    }
    .banner img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.5s ease;
    }
    .banner .active {
      opacity: 1;
    }
    .icon {
      position: absolute;
      bottom: 58px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
    }
    .icon span {
      width: 20px;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: center;
      line-height: 20px;
      font-size: 12px;
      border-radius: 50%;
      cursor: pointer;
      transition: background 0.3s ease;
    }
    .icon .select {
      background-color: #fff;
      color: #000;
    }
    .left, .right {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 40px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      cursor: pointer;
      opacity: 0.8;
      transition: opacity 0.3s ease;
    }
    .left:hover, .right:hover {
      opacity: 1;
    }
    .left { left: 20px; }
    .right { right: 20px; }
  </style>
</head>
<body>
  <div class="banner">
    <div class="slider-container">
      <img src="../img/x1.webp" class="active">
      <img src="../img/x2.webp">
      <img src="../img/x3.webp">
      <img src="../img/x4.webp">
      <img src="../img/x5.webp">
    </div>
    <div class="icon"></div>
    <div class="left">❮</div>
    <div class="right">❯</div>
  </div>

  <script type="text/javascript">
    (function() {
      const banner = document.querySelector('.banner');
      const imgs = document.querySelectorAll('.banner img');
      const icon = document.querySelector('.icon');
      let autoPlayTimer;
      
      // 动态生成指示点
      function createIndicators() {
        icon.innerHTML = '';
        imgs.forEach((_, index) => {
          const span = document.createElement('span');
          span.textContent = index + 1;
          if (index === 0) span.classList.add('select');
          span.addEventListener('click', () => switchSlide(index));
          icon.appendChild(span);
        });
      }

      // 切换幻灯片
      function switchSlide(index) {
        const currentActive = document.querySelector('.active');
        const currentSelect = document.querySelector('.select');
        
        if (currentActive === imgs[index]) return;
        
        currentActive.classList.remove('active');
        currentSelect.classList.remove('select');
        
        imgs[index].classList.add('active');
        icon.children[index].classList.add('select');
      }

      // 下一张
      function nextSlide() {
        const currentIndex = Array.from(imgs).findIndex(img => img.classList.contains('active'));
        const nextIndex = (currentIndex + 1) % imgs.length;
        switchSlide(nextIndex);
      }

      // 上一张
      function prevSlide() {
        const currentIndex = Array.from(imgs).findIndex(img => img.classList.contains('active'));
        const prevIndex = (currentIndex - 1 + imgs.length) % imgs.length;
        switchSlide(prevIndex);
      }

      // 自动播放
      function startAutoPlay() {
        autoPlayTimer = setInterval(nextSlide, 3000);
      }

      // 事件监听
      document.querySelector('.left').addEventListener('click', prevSlide);
      document.querySelector('.right').addEventListener('click', nextSlide);
      
      banner.addEventListener('mouseenter', () => clearInterval(autoPlayTimer));
      banner.addEventListener('mouseleave', startAutoPlay);

      // 初始化
      createIndicators();
      startAutoPlay();

      // 预加载图片
      window.addEventListener('load', () => {
        imgs.forEach(img => {
          const temp = new Image();
          temp.src = img.src;
        });
      });
    })();
  </script>
</body>
</html>